<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8">
<style>
.accordion-heading{
	padding: 10px;
	background: #f8f8f8;
	margin-top:2px;
	border:1px #e8e8e8 solid;
}
.accordion-heading a{
	display:inline-block;
	width: 100%;
	height:100%;
}
.accordion-inner{
	padding:10px 20px
}
</style>
<body>
	<div>
		<div class="accordion" id="accordion2">
			<div class="accordion-group" th:each="type : ${types}">
				<div class="accordion-heading">
					<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" th:href="${'#' + type.id}">
						<span th:text="${type.typeName}"></span>
						（编码：<span th:text="${type.typeCode}"></span>）
						
						<button style="margin-left:200px" class="btn btn-default" th:onclick="'javascript:delPost(\''+${type.id}+'\')'">删除</button>
					</a>
				</div>
				<div th:id="${type.id}" class="accordion-body collapse" style="height: 0px; ">
					<div class="accordion-inner">
						<table>
							<tr th:each="child : ${type.childTypes}" style="border-bottom:1px #e8e8e8 solid">
								<td th:text="${child.typeName}" style="width:120px"></td>
								<td th:text="${child.typeCode}" style="width:120px"></td>
								<td><button class="btn btn-default" th:onclick="'javascript:delPost(\''+${child.id}+'\')'">删除</button></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<div id="typeModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		  <div class="modal-dialog modal-lg" role="document">
		    <div class="modal-content" style="padding:20px">
		  	  <div class="modal-head">新增类型</div>
		      <div>
		      	<form class="form-horizontal">
				  <div class="form-group">
				  	<label for="pid" class="col-sm-2 control-label">上级类型：</label>
				    <div class="col-sm-10">
				      <select id="pid" class="form-control">
			        	<option value=""></option>
			        	<option th:each="type : ${types}" th:value="${type.id}" th:text="${type.typeName}"></option>
			          </select>
				    </div>
				  </div>
				  <div class="form-group">
				  	<label for="typeCode" class="col-sm-2 control-label">类型编码：</label>
				    <div class="col-sm-10">
				      <input id="typeCode" class="form-control" placeholder="类型编码">
				    </div>
				  </div>
				  <div class="form-group">
				  	<label for="typeName" class="col-sm-2 control-label">类型名称：</label>
				    <div class="col-sm-10">
				      <input id="typeName" class="form-control" placeholder="类型名称">
				    </div>
				  </div>
				  <div class="form-group" >
				  	<button style="margin-left:200px" class="btn btn-default col-sm-2" onclick="saveType()">保存</button>
				  </div>
				</form>
		      </div>
		    </div>
		  </div>
		</div>
	</div>
</body>
</html>